<template>
  <div class="bg-[var(--base-home-time-atv)] rounded-[8px] px-[8px] py-[10px]">
    <div>
      <el-radio :label="1" v-model="calcType">正常计抛</el-radio>
      <span class="text-[12px] text-[#999] leading-[17px]">
        <svg-icon icon-class="hint_line" class="text-[14px] inline-block" />
        <!-- <span class="iconfont icon-hint_line align-middle"></span> -->
        当体积重大于总重量，取体积重。例：长度（厘米cm）X宽度（厘米cm）X高度（厘米cm）/计重因子
        = 以公斤为单位的体积重量）
      </span>
    </div>
    <div class="flex items-center mt-[8px]">
      <el-radio :label="2" v-model="calcType">抛重比值</el-radio>
      <el-select v-model="ratioType" class="w-[80px]">
        <el-option
          v-for="item in options['ratio_type']"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        >
        </el-option>
      </el-select>
      <el-input-number
        :controls="false"
        v-model="ratioValue"
        class="w-[80px] ml-[8px] mr-[35px]"
      />
      <span class="text-[12px] text-[#999] leading-[17px]">
        <svg-icon icon-class="hint_line" class="text-[14px] inline-block" />
        <!-- <span class="iconfont icon-hint_line align-bottom"></span> -->
        1.当抛重比值达到设定倍率值范围时，才计抛。所有重量都取毛重计算；2.计费类型包含
        "头程"，不适用抛重比值
      </span>
    </div>
    <div class="flex items-center mt-[8px]">
      <el-radio :label="3" v-model="calcType">体积限制</el-radio>
      <el-select v-model="ratioType1" class="w-[80px]">
        <el-option
          v-for="item in [
            { label: '>', value: 1 },
            { label: '>=', value: 2 },
          ]"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        >
        </el-option>
      </el-select>
      <el-input-number
        :controls="false"
        v-model="ratioValue1"
        class="w-[80px] mx-[8px]"
      />
      <span class="mr-[4px]">cm³</span>
      <span class="text-[12px] text-[#999] leading-[17px]">
        <svg-icon icon-class="hint_line" class="text-[14px] inline-block" />
        <!-- <span class="iconfont icon-hint_line align-bottom"></span> -->
        1.
        当体积达到限制范围时，才计抛。反之所有重量取实际重量计算；2.计费类型包含
        "头程"，不适用体积限制
      </span>
    </div>
    <div class="flex items-center mt-[8px]">
      <el-radio :label="4" v-model="calcType">重量限制</el-radio>
      <el-select v-model="ratioType2" class="w-[80px]">
        <el-option
          v-for="item in [
            { label: '>', value: 1 },
            { label: '>=', value: 2 },
          ]"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        >
        </el-option>
      </el-select>
      <el-input-number
        :controls="false"
        v-model="ratioValue2"
        class="w-[80px] mx-[8px]"
      />
      <span class="mr-[4px]">Kg</span>
      <span class="text-[12px] text-[#999] leading-[17px]">
        <!-- <span class="iconfont icon-hint_line align-bottom"></span> -->
        <svg-icon icon-class="hint_line" class="text-[14px] inline-block" />
        1.当重量达到限制返回时,才计抛(当体积重大于总重量,取体积重);反之所有重量取实际重量计算.
      </span>
    </div>
    <div class="text-[12px] text-[#999] leading-[20px] mt-[8px]">
      说明:先满足是否取体积重取"是"时才进行计算,设置正常计抛,则当体积重大于总重量,取体积重,反之取实重.设置抛重比值,则抛重比值大于设置值时才取抛重计算,低于设置值不进行抛重计算
    </div>
  </div>
</template>
<script setup>
import { nextTick } from "vue";

const props = defineProps({
  data: { type: Object, default: () => ({}) },
  options: { type: Object, default: () => ({}) },
});

const calcType = ref(1);
const ratioType = ref(1);
const ratioValue = ref();
const ratioType1 = ref(1);
const ratioValue1 = ref();
const ratioType2 = ref(1);
const ratioValue2 = ref();
const emit = defineEmits(["input"]);

watch(
  () => [
    calcType.value,
    ratioType.value,
    ratioValue.value,
    ratioType1.value,
    ratioValue1.value,
    ratioType2.value,
    ratioValue2.value,
  ],
  (val) => {
    const [
      _calcTypeVal,
      _ratioTypeVal,
      _ratioValue,
      _ratioTypeVal1,
      _ratioValue1,
      _ratioTypeVal2,
      _ratioValue2,
    ] = val || [];
    nextTick(() => {
      if (_calcTypeVal === undefined) {
        emit("input", null);
        return;
      }
      if (_calcTypeVal == 2) {
        ratioValue1.value = null;
        ratioValue2.value = null;
      }
      if (_calcTypeVal == 3) {
        ratioValue.value = null;
        ratioValue2.value = null;
      }
      if (_calcTypeVal == 4) {
        ratioValue.value = null;
        ratioValue1.value = null;
      }
      if (_calcTypeVal == 1) {
        ratioValue.value = null;
        ratioValue1.value = null;
        ratioValue2.value = null;
      }

      let ratioTypeResult = null;
      let ratioValueResult = null;
      switch (_calcTypeVal) {
        case 2:
          ratioTypeResult = _ratioTypeVal;
          ratioValueResult = _ratioValue;
          break;
        case 3:
          ratioTypeResult = _ratioTypeVal1;
          ratioValueResult = _ratioValue1;
          break;
        case 4:
          ratioTypeResult = _ratioTypeVal2;
          ratioValueResult = _ratioValue2;
          break;
      }
      emit(
        "input",
        val
          ? {
              volume_calc_type: _calcTypeVal,
              ratio_type: _calcTypeVal === 1 ? null : ratioTypeResult,
              ratio_value: _calcTypeVal === 1 ? null : ratioValueResult,
            }
          : null
      );
    });
  }
);

watch(
  () => props.data,
  (val) => {
    const {
      volume_calc_type = 1,
      ratio_type = 1,
      ratio_value = "",
    } = val || {};
    calcType.value = volume_calc_type;
    if (volume_calc_type == 1) {
      ratioValue.value = null;
    } else if (volume_calc_type == 2) {
      ratioType.value = ratio_type;
      ratioValue.value = Number(ratio_value || 0);
    } else if (volume_calc_type == 3) {
      ratioType1.value = ratio_type;
      ratioValue1.value = Number(ratio_value || 0);
    } else if (volume_calc_type == 4) {
      ratioType2.value = ratio_type;
      ratioValue2.value = Number(ratio_value || 0);
    }
  },
  {
    immediate: true,
    // deep: true,
  }
);
</script>
